This tutorial contains to know how to make a simple login form. You can learn and use this codes to your project.
Demo
Let's Start Coding
Step 1 : Add HTML
HTML
<!DOCTYPE html>
<html>
<head>
<body>
</html>
<html>
<head>
<title> Simple Login Form </title>
</head> <body>
<form action="">
</body>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="LOGIN">
</form>
<input type="password" placeholder="Password">
<input type="submit" value="LOGIN">
</html>
Step 2 : Add CSS
CSS
body {
form {
form input:not([type="submit"]) {
form input[type="submit"] {
background : #f9f9f9;
font-family : tahoma;
} font-family : tahoma;
form {
background : #fff;
width : 280px;
padding : 10px;
border-radius : 5px;
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
box-shadow : 0 0 10px #ddd;
text-align : center;
} width : 280px;
padding : 10px;
border-radius : 5px;
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
box-shadow : 0 0 10px #ddd;
text-align : center;
form input:not([type="submit"]) {
width : 100%;
margin : 10px 0;
border : none;
outline : none;
background : none;
box-shadow : inset 0 0 10px #eee;
padding : 10px;
border-radius : 5px;
} margin : 10px 0;
border : none;
outline : none;
background : none;
box-shadow : inset 0 0 10px #eee;
padding : 10px;
border-radius : 5px;
form input[type="submit"] {
background : #00ccff;
color : #fff;
width : 50%;
border : none;
padding : 5px;
border-radius : 5px;
cursor : pointer;
} color : #fff;
width : 50%;
border : none;
padding : 5px;
border-radius : 5px;
cursor : pointer;
Browse my all Front End Designs to learn and use on your project to make it more functional.